import React, { Component, lazy, Suspense } from "react";
// lazy函数就是用来做组件的懒加载的
// 要将import命令改成import函数

// lazy需要配合Suspense，Suspense组件可以添加fallback的属性，用于添加加载效果

// import Child from "./Child";

const Child = lazy(() => import("./Child"));

const Loading = () => {
  return <div>loading...</div>;
};

class App extends Component {
  state = {
    show: false,
  };
  fn = () => {
    this.setState({
      show: true,
    });
  };
  render() {
    return (
      <>
        <h2>组件懒加载</h2>
        <button onClick={this.fn}>btn</button>
        <Suspense fallback={<Loading />}>
          {this.state.show && <Child />}
        </Suspense>
      </>
    );
  }
}

export default App;
